<template>
  <div>
    <div class="from-box">
      <!--序号  -->
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="80px"
        status-icon
      >
        <el-form-item label="appid" prop="index">
          <el-input v-model="form.index" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 名称 -->
        <el-form-item label="appsecret" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 创建按钮 -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit('form')">
            立即创建
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { addtable } from "@/api/settings";
export default {
  data() {
    //   自定义验证
    let validateName = (rule, value, callback) => {
      if (value === "") {
        return callback("请输入appsecret");
      }
      return callback();
    };
    let validateIndex = (rule, value, callback) => {
      if (value === "") {
        return callback("请输入appid");
      }
      return callback();
    };
    return {
      form: {
        name: "",
        index: "",
      },
      rules: {
        name: [{ validator: validateName, trigger: "blur" }],
        index: [{ validator: validateIndex, trigger: "blur", type: "number" }],
      },
    };
  },
  methods: {
    onSubmit(form) {
      this.$refs[form].validate((valid) => {
        // 全对则发送添加
        if (valid) {
          addtable({ appid: this.form.index, appsecret: this.form.name })
            .then((res) => {
              // 提示成功
              this.$message({
                message: res.msg,
                type: "success",
              });
              // 清空
              this.form.name = "";
              this.form.index = "";
            })
            .catch((err) => {
              this.$message.error("添加失败");
            });
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.from-box {
  width: 600px;
  margin: 20px 0 0 20px;
}
</style>